<template>
	<view class="container">
		<u-navbar :isBack="true" :background="{background: 'rgba(0,0,0,0)'}" :immersive="true" :borderBottom="false"
			title-color="#101010"></u-navbar>
		<view class="flex-row-center" style="width: 750rpx; height: 750rpx;background: red;">
			地图
		</view>

		<view style="padding: 24rpx 32rpx; background: white;">
			<view style="display: flex;align-items: center;justify-content: space-between;">
				<view style="color: #ff9900;font-weight: bold;font-size: 32rpx;">
					￥100.00</view>
				<view style="color: #ff9900;" v-if="tabIndex == 0">等待接单</view>
				<view style="color: #ff9900;" v-if="tabIndex == 1">待服务</view>
				<view style="color: #ff9900;" v-if="tabIndex == 2">服务中</view>
				<view style="color: #ff9900;" v-if="tabIndex == 3">已完成</view>
			</view>
			<view style="margin-top: 16rpx;">
				<view style="display: flex; align-items: center;">
					<view style=";background: #0BB1EF;border-radius: 20rpx;color: white;
					padding: 12rpx 18rpx;font-size: 24rpx;">服</view>
					<view style="flex: 1;margin-left: 40rpx;">
						<view style="font-weight: bold;font-size: 30rpx;">门锁换锁(此处为需求工种)</view>
					</view>
				</view>
				<view style="margin-top: 16rpx;display: flex;align-items: center;">
					<view style=";background: #0daff0;border-radius: 20rpx;color: #fff;
					padding: 12rpx 18rpx;font-size: 24rpx;">目</view>
					<view style="flex: 1;margin-left: 40rpx;">
						<view style="font-weight: bold;font-size: 30rpx;
						width: 300px;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;">贵阳市南明区花果园金融街1号1824</view>
						<view style="color: #999;font-size: 26rpx;margin-top: 10rpx;">
							<text>贵阳市南明区花果园金融街1号1824</text>
							<text style="padding-left: 24rpx;">156****5412</text>
						</view>
					</view>
				</view>
			</view>	
			
		</view>
		<u-gap height="20" bg-color="#F5F5F5"></u-gap>
		<!-- 服务项目 -->
		<view class="flex-row-start" style="font-size: 0rpx; padding:32rpx; background: white;">
			<image style="width: 200rpx; height: 200rpx; border-radius: 16rpx; background: rgb(230, 230, 230);">
				
			</image>
			<view class="flex-col-start" style="height: 200rpx; position: relative; margin-left: 16rpx; align-items: flex-start; justify-content: space-between;">
				<view class="flex-col-start" style="align-items: flex-start; justify-content: flex-start;">
					<view class="u-line-1" style="color: #333333; font-size: 28rpx; font-weight: bold;">清立式空调清洗名称清洗名称清洗名称..</view>
					<view style="margin-top: 10rpx; color: #999999; font-size: 28rpx; font-weight: 500;">规格一;规格二</view>
				</view>
				<view style="font-size: 24rpx; font-weight: bold; color: #666666;">￥1<span style="font-size: 32rpx;">121</span>.05</view>
				<view style="font-size: 32rpx; position: absolute; right: 0; bottom: 0; color: #0BB1EF;">x1</view>
			</view>
		</view>
		<u-gap height="20" bg-color="#F5F5F5"></u-gap>
		
		<view style="padding:24rpx 32rpx;">
			<view class="flex-row-start order-item1">
				<view style="color: #666666; font-weight: 500;">订单编号</view>
				<view class="flex-row-start">
					<view style="color: #333333; font-weight: 500;">20225113215554</view>
					<view style="margin-left: 16rpx; margin-right: 16rpx; width: 1px; height: 24rpx; background: #999999;"></view>
					<view style="color: #0BB1EF; font-weight: 500; font-size: 28rpx;">复制</view>
				</view>
			</view>
			<view class="flex-row-start order-item1">
				<view style="color: #666666; font-weight: 500;">服务时间</view>
				<view style="color: #FC7404; font-weight: bold;">
					服务时间
				</view>
			</view>
			<view class="flex-row-start order-item1">
				<view style="color: #666666; font-weight: 500;">下单时间</view>
				<view style="color: #333333; font-weight: 500;">
					定价商品服务
				</view>
			</view>
			<view class="flex-row-start order-item1">
				<view style="color: #666666; font-weight: 500;">订单类型</view>
				<view style="color: #333333; font-weight: 500;">
					定价商品服务
				</view>
			</view>
			<view class="flex-row-start order-item1">
				<view style="color: #666666; font-weight: 500;">接单时间</view>
				<view style="color: #333333; font-weight: 500;">
					2023-10-31
				</view>
			</view>
		</view>


	</view>
</template>

<!-- <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=a70b49c39a96a01751f27a38197ae46c"></script> -->
<script>
	// import QQMapWX from "@/common/qqmap-wx-jssdk.js";
	// import { orderApi } from '@/common/user.js';
	// import { userApi } from '@/common/user.js';
	import configUrl from 'utils/config.js';
	import {
		request
	} from 'utils/request.js';
	export default {
		data() {
			return {
				tabIndex:0,

			}
		},
		onLoad(option) {

			this.specOrderId = option.order_id;
			this.getOrderInfo(option.order_id);
			// console.log(this.marker,'44444444444')

		},
		methods: {

			//获取订单详情

			getOrderInfo(oid) {
				let _this = this;
				// request.getWithToken({
				// 	url: '/order/orderDetails',
				// 	data: {order_id : oid}
				// }).then(res=>{
				// 	console.log(res);
				// 	_this.orderData = res.data.orderData;
				// 	this.actualDescImgs = res.data.orderData.desc_images;
				// });
				// console.log('marksssssss',this.marker)
			},
			// 预览大图
			previewImg() {
				uni.previewImage({
					urls: this.actualDescImgs
				});
			},
			// 复制订单编号
			tryCopy(content) {
				uni.setClipboardData({
					data: content
				});
			},

		}
	}
</script>
<style>
	/* page{
		background: #F5F5F5;
	} */
	/* @import url('/static/css/style.css'); */
</style>
<style scoped>
	.order-item1{
		height: 80rpx;
		font-size: 32rpx;
		justify-content: space-between;
	}
	.container {
		height: 100vh;
	}

	.downBox {
		width: 100%;
		height: auto;
		padding: 0rpx 0rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
	}

	.order-map {
		width: 100%;
		height: auto;
		padding: 0rpx 0rpx;
		box-sizing: border-box;
		margin-bottom: 20rpx;
	}

	.order-map-container {
		width: 100%;
		height: auto;
		border-radius: 10rpx;
		background-color: #fff;
		display: flex;
		flex-direction: column;
	}

	.order-main {
		display: flex;
		flex-direction: column;

	}

	.order-main-content {
		display: flex;
		flex-direction: row;
		margin-bottom: 30rpx;

	}

	.order-main-content-item {
		flex: 1;
		flex-direction: column;
		margin-left: 25rpx;
	}

	.title {
		font-size: 28rpx;
		font-weight: bold;
	}

	.contacts {
		display: flex;
		flex-direction: row;
		font-size: 24rpx;
		color: #999;
		line-height: 24rpx;
		align-items: baseline;
	}

	.contacts-text-item {
		margin-right: 10rpx;
	}

	.contacts-medal {
		color: #fb7601;
		background-color: #ffefe2;
		padding: 10rpx;
		border-radius: 10rpx;
		margin-right: 40rpx;
	}

	.dot-green {
		width: 15rpx;
		height: 15rpx;
		background-color: #16d692;
		border-radius: 50%;
		color: #16d692;
		align-self: center;
	}

	.dot-black {
		width: 15rpx;
		height: 15rpx;
		background-color: #000;
		border-radius: 50%;
		color: #000;
		align-self: center;
	}

	.order-main-toptips {
		font-size: 26rpx;
		background-color: #FFEDE1;
		color: #EE811D;
		padding: 20rpx 30rpx;
		width: 100vw;
	}

	.order-map-control {
		width: 100%;
		height: 40vh;
		background-color: #FFF;
		padding: 0;
	}

	.orderListBox {
		width: 100%;
		height: auto;
		padding: 0rpx 0rpx;
		box-sizing: border-box;
	}

	.order-maintitle {
		font-weight: bold;
		font-size: 42rpx;
		margin-top: 50rpx;
	}

	.order-maintitle text {
		color: #fb7502;
		margin: 0 5rpx 0 5rpx;
	}

	.orderLists {
		width: 100%;
		height: auto;
		border-radius: 10rpx;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		padding: 0 40rpx 0 40rpx;
	}

	.masterListBox {
		width: 100%;
		height: auto;
		padding: 0rpx 0rpx;
		box-sizing: border-box;
		margin-bottom: 120rpx;
	}

	.masterListBox-Container {
		width: 100%;
		height: auto;
		border-radius: 10rpx;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		padding: 40rpx 40rpx 40rpx 40rpx;
	}

	.master-item {
		display: flex;
		flex-direction: row;
		padding: 10rpx 0;
		align-items: center;

	}

	.master-item-name {
		font-size: 26rpx;
		margin: 0 20rpx 0 20rpx;
	}

	.master-item-medal {
		font-size: 22rpx;
		padding: 10rpx 10rpx;
		background-color: #ffefe2;
		color: #fe7403;
	}

	.master-item-mobile {
		flex: 1;
		font-size: 24rpx;
		color: #999;
		text-align: right;
	}

	.master-item image {
		width: 96rpx;
		height: 96rpx;
		border: 1rpx solid #999;
		border-radius: 50%;
	}


	.title image {
		width: 50rpx;
		height: 50rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.beizhuBox {
		display: flex;
		font-size: 26rpx;
		align-items: baseline;
		flex-direction: column;
		color: #999;
		box-sizing: border-box;
	}

	.beizhuBox>text:first-of-type {
		padding-bottom: 0rpx;
	}

	.beizhuBox text:last-of-type {
		/* flex: 1; */
		text-align: left;
		color: #000;
		margin-top: 10rpx;
		white-space: normal;
		height: auto;
	}


	.beizhuBox picker {
		flex: 1;
		text-align: right;
		color: #999;
	}

	.beizhuBox-imgs-group {
		display: flex;
		flex-direction: row;
		margin-top: 20rpx;
		flex-wrap: wrap;
	}

	.beizhuBox-imgs-group-image {
		width: 25vw;
		height: 25vw;
		margin-right: 4vw;
		border-radius: 10rpx;
	}

	.masterListBox {}

	.listBox {
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 26rpx;
		flex-grow: 1;
	}

	.listBox-btn {
		/* border: 0rpx solid #999; */
		border-left: 2rpx solid #8c8c8c;
		font-size: 24rpx;
		color: #fb7502;
		padding: 0 10rpx;
		margin-left: 10rpx;
		background-color: #FFF;
	}

	.listBox>text:nth-of-type(1) {
		font-size: 26rpx;
		color: #999;
	}

	.listBox>text:nth-of-type(2) {
		font-size: 26rpx;
		color: #999;
		flex-grow: 9;
	}

	.listBox>image {
		width: 38rpx;
		height: 38rpx;
		margin-right: 10rpx;
	}

	.footer {
		width: 100%;
		height: 120rpx;
		padding: 0rpx 0rpx;
		box-sizing: border-box;
		position: fixed;
		bottom: 0;
	}

	.footer-Box {
		width: 100%;
		height: 120rpx;
		border-radius: 10rpx;
		background-color: #fff;
		display: flex;
		padding: 20rpx 40rpx 5rpx 40rpx;
		margin-bottom: 20rpx;
		flex-direction: row;
		align-items: baseline;
		font-size: 22rpx;
		color: #999;
	}

	.footer-Box-Amount {
		font-weight: bold;
		color: #fd7403;
		font-size: 34rpx;
		flex: 1;
	}

	.fotter-Box-btn-primary {
		font-size: 28rpx;
		vertical-align: bottom;
		background-color: #fd7501;
		color: #fff;
		padding: 0 40rpx;
		margin-left: 10rpx;
	}
</style>
<style lang="scss">
	.pop {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.78);
		z-index: 999;

		.pop_k {
			width: 630rpx;
			position: fixed;
			top: 12%;
			left: 10%;
			// margin-top: -186rpx;
			// margin-left: -300rpx;
			z-index: 9;
		}

		.popTitle {
			width: 100%;
			text-align: center;
			color: #ffffff;
			position: absolute;
			top: 50rpx;
		}

		.popCenter {
			width: 100%;
			text-align: center;
			color: #ffffff;
			margin-top: 150rpx;
			font-size: 40rpx;
		}

		.popBtn {
			width: 80%;
			text-align: center;
			position: absolute;
			bottom: 20rpx;
			left: 50%;
			margin-left: -40%;
			padding: 30rpx 0;
			border-top: 1px solid #53beae;
			color: #53beae;
		}
	}
</style>